import { ref } from "vue";
import { ElMessage } from "element-plus";
import Sortable from "sortablejs";
import { articleSort } from "@/api/article";
import i18n from "@/i18n";

// 排序相关
export const tableRef = ref(null);

// 初始化排序
export const initSortable = (tableData, cb) => {
  // 设置拖拽效果
  const el = tableRef.value.$el.querySelectorAll(
    ".el-table__body-wrapper > table > tbody"
  )[0];
  // 1. 要拖拽的元素
  // 2. 配置对象
  Sortable.create(el, {
    // 拖拽时类名
    ghostClass: "sortable-ghost",
    // 拖拽结束的回调方法
    async onEnd(event) {
      const { newIndex, oldIndex } = event;
      // 修改数据
      await articleSort({
        initRanking: tableData.value[oldIndex].ranking,
        finalRanking: tableData.value[newIndex].ranking,
      });
      ElMessage.success({
        message: i18n.global.t("msg.article.sortSuccess"),
        type: "success",
      });
      // 直接重新获取数据无法刷新 table！！
      tableData.value = [];
      // 重新获取数据
      cb && cb();
    },
  });
};
